
<template>
    <div class="wrap wrap-flex">
        <div class="e-box pie-box">
            <div class="pie border" v-for="item in pieData" :key="item.id">
                <Pie :name="item.name" :type="item.type" :data="item.data" :legendPosition="item.legendPosition"></Pie>
            </div>
        </div>
        <div class="e-box">
            <div class="bar-box border">
                <Bar></Bar>
            </div>
        </div>
        <div class="e-box">
            <div class="bar-box border">
                <Line></Line>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import Pie from "@/components/Echarts/Pie/index.vue"
import Bar from "@/components/Echarts/Bar/index.vue"
import Line from "@/components/Echarts/Line/index.vue"
interface PieData {
    value: number
    name: string
}
interface AllPieData {
    id: number,
    name: string,
    type: "A" | "B" | "C" | "D"
    legendPosition: "top" | "bottom" | "left" | "right",
    data: PieData[]
}
const pieData: AllPieData[] = [
    {
        id: 0,
        name: "防御",
        type: "A",
        legendPosition: "left",
        data: [
            { value: 80, name: '马保国' },
            { value: 40, name: '嘎子' },
            { value: 60, name: '潘子' },
            { value: 100, name: '二营长' },
            { value: 20, name: '鸡你太美' },
        ]
    },
    {
        id: 1,
        name: "攻击",
        type: "B",
        legendPosition: "right",
        data: [
            { value: 65, name: '马保国' },
            { value: 35, name: '嘎子' },
            { value: 45, name: '潘子' },
            { value: 100, name: '二营长' },
            { value: 55, name: '鸡你太美' },
        ]
    },
    {
        id: 2,
        name: "敏捷",
        type: "C",
        legendPosition: "left",
        data: [
            { value: 60, name: '马保国' },
            { value: 38, name: '嘎子' },
            { value: 55, name: '潘子' },
            { value: 30, name: '二营长' },
            { value: 60, name: '鸡你太美' },
        ]
    },
    {
        id: 3,
        name: "血量",
        type: "D",
        legendPosition: "right",
        data: [
            { value: 66, name: '马保国' },
            { value: 85, name: '嘎子' },
            { value: 65, name: '潘子' },
            { value: 35, name: '二营长' },
            { value: 100, name: '鸡你太美' },
        ]
    }
]

</script>

<style lang="less" scoped>
.w {
    width: 100%;
    height: 100%;
}

.wrap-flex {
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
    background-color: var(--background);

    .e-box {
        width: 50%;
        height: 50%;
        padding: 10px;
        overflow: hidden;

        .border {
            border-radius: 8px;
            box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
        }
    }

    .e-box:last-of-type {
        width: 100%;
    }

    .pie-box {
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;
        overflow: hidden;

        .pie {
            display: inline-block;
            width: calc(50% - 10px);
            height: calc(50% - 10px);
            overflow: hidden;
        }
    }

    .bar-box {
        .w;
        overflow: hidden;
    }
}
</style>